<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端隐私协议弹窗集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #1877F2;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 不同风格主题色 */
      --style1: #1877F2; /* 经典社交蓝 */
      --style2: #E1306C; /* 活力粉 */
      --style3: #3B82F6; /* 科技蓝 */
      --style4: #111827; /* 深色模式 */
      --style5: #F97316; /* 活力橙 */
      --style6: #8B5CF6; /* 优雅紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 主页面内容 */
    .main-content {
      padding: 20px;
      text-align: center;
      padding-top: 100px;
    }
    
    .app-logo {
      font-size: 60px;
      color: var(--primary);
      margin-bottom: 20px;
    }
    
    .app-name {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .app-desc {
      color: var(--secondary);
      margin-bottom: 30px;
    }
    
    .open-btn {
      padding: 12px 30px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .open-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    /* 弹窗基础样式 */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: flex-end;
      z-index: 1050;
    }
    
    .modal-backdrop.active {
      display: flex;
    }
    
    .privacy-modal {
      width: 100%;
      max-width: 420px;
      background-color: var(--white);
      border-radius: 16px 16px 0 0;
      max-height: 85vh;
      overflow: hidden;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .modal-backdrop.active .privacy-modal {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 20px;
      border-bottom: 1px solid var(--border);
      position: relative;
      text-align: center;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      font-size: 20px;
      color: var(--secondary);
      cursor: pointer;
    }
    
    .modal-body {
      padding: 20px;
      overflow-y: auto;
      max-height: calc(85vh - 150px);
      font-size: 14px;
      line-height: 1.6;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 15px 0 10px;
    }
    
    .modal-footer {
      padding: 15px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
    }
    
    .modal-btn {
      flex: 1;
      padding: 12px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-accept {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-decline {
      background-color: var(--light);
      color: var(--dark);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 控制按钮 */
    .control-buttons {
      padding: 15px 20px;
      display: flex;
      gap: 10px;
      background-color: white;
      border-top: 1px solid var(--border);
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 420px;
      box-sizing: border-box;
    }
    
    .control-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 各种风格的样式 */
    /* 风格1：经典社交 */
    .style-1 {
      --primary: var(--style1);
    }
    
    /* 风格2：活力粉色 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .privacy-modal {
      border-radius: 20px 20px 0 0;
    }
    
    .style-2 .modal-header {
      background-color: rgba(225, 48, 108, 0.05);
      border-bottom: none;
    }
    
    /* 风格3：科技蓝 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .modal-body {
      padding: 20px;
      background-color: rgba(59, 130, 246, 0.02);
    }
    
    .style-3 .section-title {
      color: var(--primary);
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    }
    
    /* 风格4：深色模式 */
    .style-4 {
      --primary: var(--style4);
      --dark: white;
      --secondary: #9ca3af;
      --border: #374151;
      --light: #1f2937;
    }
    
    .style-4 .container {
      background-color: #111827;
      color: white;
    }
    
    .style-4 .privacy-modal {
      background-color: #1f2937;
      color: white;
    }
    
    .style-4 .modal-backdrop {
      background-color: rgba(0, 0, 0, 0.7);
    }
    
    .style-4 .btn-accept {
      background-color: #3b82f6;
    }
    
    /* 风格5：活力橙 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .modal-header {
      background: linear-gradient(90deg, #F97316, #FB923C);
      color: white;
    }
    
    .style-5 .modal-title {
      color: white;
    }
    
    .style-5 .close-btn {
      color: white;
    }
    
    .style-5 .modal-btn {
      border-radius: 25px;
    }
    
    /* 风格6：优雅紫色 */
    .style-6 {
      --primary: var(--style6);
    }
    
    .style-6 .privacy-modal {
      border-radius: 25px 25px 0 0;
    }
    
    .style-6 .modal-footer {
      background-color: rgba(139, 92, 246, 0.05);
    }
    
    .style-6 .section-title {
      position: relative;
      padding-left: 15px;
    }
    
    .style-6 .section-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 6px;
      height: 16px;
      background-color: var(--primary);
      border-radius: 3px;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .modal-btn {
        font-size: 15px;
        padding: 10px;
      }
      
      .modal-title {
        font-size: 17px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择隐私协议样式</div>
    <div class="switcher-option active" data-style="1">经典社交</div>
    <div class="switcher-option" data-style="2">活力粉色</div>
    <div class="switcher-option" data-style="3">科技蓝</div>
    <div class="switcher-option" data-style="4">深色模式</div>
    <div class="switcher-option" data-style="5">活力橙</div>
    <div class="switcher-option" data-style="6">优雅紫色</div>
  </div>
  
  <div class="container">
    <!-- 主页面内容 -->
    <div class="main-content">
      <div class="app-logo">
        <i class="fa fa-connectdevelop"></i>
      </div>
      <h1 class="app-name">社交圈</h1>
      <p class="app-desc">连接世界，分享生活的每一刻</p>
      <button class="open-btn" id="openModalBtn">查看隐私协议</button>
    </div>
    
    <!-- 隐私协议弹窗 - 风格1：经典社交 -->
    <div class="modal-backdrop" id="modal1">
      <div class="privacy-modal">
        <div class="modal-header">
          <h2 class="modal-title">隐私政策</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <p>欢迎使用社交圈应用（以下简称"本应用"）。我们尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。</p>
          
          <h3 class="section-title">一、信息收集与使用</h3>
          <p>1. 当您注册本应用账号时，您根据本应用要求提供的个人注册信息；</p>
          <p>2. 当您使用本应用服务时，本应用自动接收并记录的您的手机上的信息，包括但不限于您的IP地址、浏览器类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据；</p>
          <p>3. 本应用通过合法途径从商业伙伴处取得的用户个人数据。</p>
          
          <h3 class="section-title">二、信息披露</h3>
          <p>在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：</p>
          <p>1. 经您事先同意，向第三方披露；</p>
          <p>2. 为提供您所要求的产品和服务，而必须和第三方分享您的个人信息；</p>
          <p>3. 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；</p>
          <p>4. 如您出现违反中国有关法律、法规或者本应用服务协议或相关规则的情况，需要向第三方披露；</p>
          <p>5. 其它本应用根据法律、法规或者网站政策认为合适的披露。</p>
          
          <h3 class="section-title">三、信息存储和保护</h3>
          <p>1. 本应用收集的有关您的信息和资料将保存在本应用及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或本应用收集信息和资料所在地的境外并在境外被访问、存储和展示。</p>
          <p>2. 本应用承诺采取严格的安全措施保护您的个人信息，防止信息被未经授权的访问、使用或泄露。</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-decline">拒绝</button>
          <button class="modal-btn btn-accept">同意</button>
        </div>
      </div>
    </div>
    
    <!-- 隐私协议弹窗 - 其他风格（结构相同，样式不同） -->
    <div class="modal-backdrop" id="modal2">
      <div class="privacy-modal">
        <!-- 内容与modal1相同，样式由CSS控制 -->
        <div class="modal-header">
          <h2 class="modal-title">隐私政策</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 相同内容 -->
          <p>欢迎使用社交圈应用（以下简称"本应用"）。我们尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。</p>
          
          <h3 class="section-title">一、信息收集与使用</h3>
          <p>1. 当您注册本应用账号时，您根据本应用要求提供的个人注册信息；</p>
          <p>2. 当您使用本应用服务时，本应用自动接收并记录的您的手机上的信息；</p>
          
          <h3 class="section-title">二、信息披露</h3>
          <p>在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：</p>
          <p>1. 经您事先同意，向第三方披露；</p>
          <p>2. 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；</p>
          
          <h3 class="section-title">三、信息存储和保护</h3>
          <p>1. 本应用收集的有关您的信息和资料将保存在本应用及（或）其关联公司的服务器上；</p>
          <p>2. 本应用承诺采取严格的安全措施保护您的个人信息。</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-decline">拒绝</button>
          <button class="modal-btn btn-accept">同意</button>
        </div>
      </div>
    </div>
    
    <!-- 风格3-6的弹窗结构相同，省略内容 -->
    <div class="modal-backdrop" id="modal3">
      <div class="privacy-modal">
        <!-- 内容结构相同 -->
        <div class="modal-header">
          <h2 class="modal-title">隐私政策</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 相同内容 -->
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-decline">拒绝</button>
          <button class="modal-btn btn-accept">同意</button>
        </div>
      </div>
    </div>
    
    <div class="modal-backdrop" id="modal4">
      <div class="privacy-modal">
        <!-- 内容结构相同 -->
        <div class="modal-header">
          <h2 class="modal-title">隐私政策</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 相同内容 -->
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-decline">拒绝</button>
          <button class="modal-btn btn-accept">同意</button>
        </div>
      </div>
    </div>
    
    <div class="modal-backdrop" id="modal5">
      <div class="privacy-modal">
        <!-- 内容结构相同 -->
        <div class="modal-header">
          <h2 class="modal-title">隐私政策</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 相同内容 -->
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-decline">拒绝</button>
          <button class="modal-btn btn-accept">同意</button>
        </div>
      </div>
    </div>
    
    <div class="modal-backdrop" id="modal6">
      <div class="privacy-modal">
        <!-- 内容结构相同 -->
        <div class="modal-header">
          <h2 class="modal-title">隐私政策</h2>
          <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 相同内容 -->
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-decline">拒绝</button>
          <button class="modal-btn btn-accept">同意</button>
        </div>
      </div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn" id="prevBtn">
        <i class="fa fa-chevron-left"></i> 上一个
      </button>
      <button class="control-btn" id="nextBtn">
        下一个 <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const modals = {
      1: document.getElementById('modal1'),
      2: document.getElementById('modal2'),
      3: document.getElementById('modal3'),
      4: document.getElementById('modal4'),
      5: document.getElementById('modal5'),
      6: document.getElementById('modal6')
    };
    const openModalBtn = document.getElementById('openModalBtn');
    const prevButton = document.getElementById('prevBtn');
    const nextButton = document.getElementById('nextBtn');
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 上一个/下一个按钮
      prevButton.addEventListener('click', showPrevStyle);
      nextButton.addEventListener('click', showNextStyle);
      
      // 打开弹窗按钮
      openModalBtn.addEventListener('click', function() {
        closeAllModals();
        modals[currentStyle].classList.add('active');
        // 阻止背景滚动
        document.body.style.overflow = 'hidden';
      });
      
      // 关闭按钮和背景点击事件
      Object.values(modals).forEach(modal => {
        // 关闭按钮
        const closeBtn = modal.querySelector('.close-btn');
        closeBtn.addEventListener('click', function() {
          modal.classList.remove('active');
          document.body.style.overflow = '';
        });
        
        // 点击背景关闭
        modal.addEventListener('click', function(e) {
          if (e.target === modal) {
            modal.classList.remove('active');
            document.body.style.overflow = '';
          }
        });
        
        // 同意和拒绝按钮
        const acceptBtn = modal.querySelector('.btn-accept');
        const declineBtn = modal.querySelector('.btn-decline');
        
        acceptBtn.addEventListener('click', function() {
          modal.classList.remove('active');
          document.body.style.overflow = '';
          alert('您已同意隐私政策');
        });
        
        declineBtn.addEventListener('click', function() {
          modal.classList.remove('active');
          document.body.style.overflow = '';
          alert('您已拒绝隐私政策，部分功能可能无法使用');
        });
      });
    }
    
    // 关闭所有弹窗
    function closeAllModals() {
      Object.values(modals).forEach(modal => {
        modal.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 更新应用logo颜色
      document.querySelector('.app-logo').style.color = 'var(--primary)';
      document.querySelector('.open-btn').style.backgroundColor = 'var(--primary)';
      document.querySelector('.control-btn').style.backgroundColor = 'var(--primary)';
    }
    
    // 显示上一个样式
    function showPrevStyle() {
      let prev = currentStyle - 1;
      if (prev < 1) prev = 6;
      switchStyle(prev);
    }
    
    // 显示下一个样式
    function showNextStyle() {
      let next = currentStyle + 1;
      if (next > 6) next = 1;
      switchStyle(next);
    }
    
    // 启动
    init();
  </script>
</body>
</html>
